<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          ref="queryForm"
          style="margin-left: -20px"
        >
          <a-row :gutter="32">
            <a-col :span="5">
              <a-form-item label="客户姓名" prop="cusName">
                <a-input
                  v-model="queryParam.cusName"
                  allow-clear
                  placeholder="输入查询客户姓名"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="联系电话" prop="phone">
                <a-input
                  v-model="queryParam.phone"
                  allow-clear
                  placeholder="输入查询联系方式"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="客户经理" prop="userName">
                <a-input
                  v-model="queryParam.userName"
                  allow-clear
                  placeholder="输入查询客户经理"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="联系方式" prop="ideasType">
                <a-select
                  placeholder="请联系方式"
                  v-model="queryParam.ideasType"
                  style="width: 100%"
                  allow-clear
                >
                  <a-select-option
                    v-for="(d, index) in ideasTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>

            <a-col>
              <span
                class="table-page-search-submitButtons"
                style="float: right"
              >
                <a-button type="primary" @click="handleQuery"
                  ><a-icon type="search" />查询</a-button
                >
                <a-button style="margin-left: 8px" @click="resetQuery"
                  ><a-icon type="redo" />重置</a-button
                >
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="table-card" style="margin-top: 0px">
      <a-row>
        <a-col :span="24">
          <a-row>
            <a-col :span="24" style="padding-right: 30px; text-align: right">
              <a-button type="" @click="handleExport" class="import-button">
                <a-icon type="download" />导出
              </a-button>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="15">
          <a-row>
            <a-col :span="24" style="display: flex; padding-top: 10px">
              <span class="titbox"></span>
              <span class="text">实时跟进</span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div
                :class="
                  !item.checkgenjin ? 'genjin-brder' : 'genjin-brder active'
                "
                v-for="(item, key) in bizCustomerShadowInfoList"
                :key="key"
                @click="handleCheck(item.customerId)"
              >
                <a-row style="font-size: 13px">
                  <a-col :span="2">{{ item.userName }}</a-col>
                  <a-col :span="5"
                    ><a-icon type="history" class="aicon" />{{
                      item.createTime
                    }}</a-col
                  >
                  <a-col :span="3"
                    ><a-icon type="user" class="aicon" /><span
                      style="color: #f8643f"
                      >{{ item.name }}</span
                    ></a-col
                  >
                  <a-col :span="4"
                    ><a-icon type="phone" class="aicon" />{{
                      item.phone
                    }}</a-col
                  >
                  <a-col :span="3"
                    ><a-icon type="share-alt" class="aicon" />{{
                      item.ideasType
                    }}</a-col
                  >
                </a-row>
                <a-row>
                  <a-col :span="24" class="genjin-takes">{{
                    item.takes
                  }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="24" class="genjin-pinlun"
                    >评论
                    <span style="color: #606266">(0)</span>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row>
            <a-col
              :span="24"
              style="
                border-left: 1.5px solid #ecedee;
                height: calc(100vh - 30vh);
                margin-top: 10px;
              "
            >
              <a-row>
                <a-col :span="24" style="display: flex">
                  <span class="titbox"></span>
                  <span class="text">历史跟进记录</span>
                </a-col>
              </a-row>

              <a-timeline
                style="margin-top: 30px"
                v-if="bizCustomerShadowInfoListDetials.length > 0"
              >
                <a-timeline-item
                  style="margin-left: 25px; padding: 0px"
                  v-for="(item, key) in bizCustomerShadowInfoListDetials"
                  :key="key"
                  @click="handleCheck(item.id)"
                >
                  <a-icon
                    slot="dot"
                    type="clock-circle-o"
                    style="font-size: 16px"
                  />
                  {{ item.createTime }}
                  <a-row>
                    <a-col
                      :span="24"
                      class="genjin-brder"
                      style="margin-top: 5px; margin-left: 5px"
                    >
                      <a-row style="font-size: 13px">
                        <a-col :span="4">{{ item.userName }}</a-col>
                        <a-col :span="4" style="color: #f8643f">{{
                          item.name
                        }}</a-col>
                        <a-col :span="6"
                          ><a-icon type="phone" class="aicon" />{{
                            item.phone
                          }}</a-col
                        >
                        <a-col :span="4"
                          ><a-icon type="share-alt" class="aicon" />{{
                            item.ideasType
                          }}</a-col
                        >
                      </a-row>
                      <a-row>
                        <a-col :span="24" class="genjin-takes">{{
                          item.takes
                        }}</a-col>
                      </a-row>
                      <a-row>
                        <a-col :span="24" class="genjin-pinlun"
                          >评论
                          <span style="color: #606266">(0)</span>
                        </a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-timeline-item>
              </a-timeline>
              <a-row v-else style="margin-top: 20px">
                <a-col :span="24"
                  ><a-empty description="点击左侧列表查看历史记录"
                /></a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="15" style="text-align: center">
          <a-row>
            <a-col :span="24"
              ><a-pagination
                size="small"
                :total="total"
                :show-total="
                  (total, range) =>
                    `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
                "
                show-size-changer
                @change="handlePageChange"
                @showSizeChange="handlePageChange"
            /></a-col>
          </a-row>
        </a-col>
        <a-col :span="9" style="text-align: center"
          ><a-row>
            <a-col :span="24"
              ><a-pagination
                size="small"
                :total="detailsTotal"
                :show-total="
                  (total, range) =>
                    `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
                "
                show-size-changer
                v-if="bizCustomerShadowInfoListDetials.length > 0"
            /></a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import {
  mylistBizCustomerShadowInfo,
  delBizCustomerShadowInfo,
  exportBizCustomerShadowInfo,
} from "@/api/biz/bizCustomerShadowInfo";
export default {
  name: "BizCustomerShadowInfo",
  components: {},
  data() {
    return {
      showAddModal: false,
      showEditModal: false,
      visible: false,
      imgsrc: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的主键集合
      selectedRowKeys: [],
      // 选中的数据集合
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      detailsTotal: 0,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 },
      // 客户跟踪表格数据
      bizCustomerShadowInfoList: [],
      // 单独的客户列表
      bizCustomerShadowInfoListDetials: [],
      // 重要级别字典
      levelOptions: [],
      // 联系方式字典
      ideasTypeOptions: [],
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 5,
        level: undefined,
        ideasType: undefined,
      },
      detailsQueryParam: { pageNum: 1, pageSize: 4, customerId: "" },
      customerId: "",

      // 选中记录
      checkgenjin: false,
      columns: [
        {
          title: "序号",
          dataIndex: "rowindex",
          ellipsis: true,
          align: "center",
          width: "3%",
          scopedSlots: { customRender: "rowindex" },
        },
        {
          title: "客户姓名",
          dataIndex: "name",
          ellipsis: true,
          align: "left",
          width: "8%",
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          ellipsis: true,
          align: "left",
          width: "8%",
        },
        {
          title: "跟进方式",
          dataIndex: "ideasType",
          // scopedSlots: { customRender: "ideasType" },
          align: "center",
          width: "7%",
        },
        {
          title: "跟进时间",
          dataIndex: "createTime",
          align: "center",
          width: "12%",
        },
        {
          title: "下次跟进时间",
          dataIndex: "nextTime",
          align: "center",
          width: "10%",
        },
        {
          title: "级别",
          dataIndex: "level",
          scopedSlots: { customRender: "level" },
          align: "center",
          width: "5%",
        },
        {
          title: "重点标记",
          dataIndex: "mark",
          align: "center",
          scopedSlots: { customRender: "mark" },
          width: "6%",
        },
        {
          title: "跟进内容",
          dataIndex: "takes",
          ellipsis: true,
          align: "left",
          width: "45%",
          scopedSlots: { customRender: "images" },
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getDicts("level_options").then((response) => {
      this.levelOptions = response.data;
    });
    this.getDicts("ideas_type_options").then((response) => {
      this.ideasTypeOptions = response.data;
    });
  },
  methods: {
    handlePageChange(page, pageSize) {
      this.queryParam.pageNum = page;
      this.queryParam.pageSize = pageSize;
      this.getList();
    },

    // 选中的样式
    handleCheck(id) {
      this.customerId = id;
      this.bizCustomerShadowInfoList = this.bizCustomerShadowInfoList.map(
        (item) => {
          if (item.id === id) {
            item.checkgenjin = true;
          } else {
            item.checkgenjin = false;
          }
          return item;
        }
      );
      this.getDetailsList(id);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    showModal(src) {
      this.visible = true;
      this.imgsrc = src;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    /** 查询客户跟踪列表 */
    getList() {
      this.loading = true;
      mylistBizCustomerShadowInfo(this.queryParam).then((response) => {
        this.bizCustomerShadowInfoList = response.data.list.map((item) => {
          return { ...item, checkgenjin: false };
        });
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 查询客户跟踪列表 */
    getDetailsList(customerId) {
      this.detailsQueryParam.customerId = customerId;
      mylistBizCustomerShadowInfo(this.detailsQueryParam).then((response) => {
        this.bizCustomerShadowInfoListDetials = response.data.list;
        this.detailsTotal = response.data.total;
      });
    },
    // 重要级别字典翻译
    levelFormat(row) {
      if (row.level) {
        return this.selectDictLabel(this.levelOptions, row.level);
      } else {
        return "";
      }
    },
    // 联系方式字典翻译
    ideasTypeFormat(row) {
      if (row.ideasType) {
        return this.selectDictLabel(this.ideasTypeOptions, row.ideasType);
      } else {
        return "";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        level: undefined,
        ideasType: undefined,
      };
      this.handleQuery();
    },
    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSizeChange(current, size) {
      this.queryParam.pageNum = 1;
      this.queryParam.pageSize = size;
      this.getList();
    },
    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current;
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      this.ids = this.selectedRows.map((item) => item.id);
      this.single = selectedRowKeys.length !== 1;
      this.multiple = !selectedRowKeys.length;
    },
    /** 查询折叠和展开操作 */
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    handleAdd() {
      this.showAddModal = true;
      this.$nextTick(() => this.$refs.bizCustomerShadowInfoAddForm.handleAdd());
    },
    handleUpdate(record, ids) {
      this.showEditModal = true;
      this.$nextTick(() =>
        this.$refs.bizCustomerShadowInfoEditForm.handleUpdate(record, ids)
      );
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var that = this;
      const bizCustomerShadowInfoIds = row.id || this.ids;
      this.$confirm({
        title: "确认删除所选中数据?",
        onOk() {
          return delBizCustomerShadowInfo(bizCustomerShadowInfoIds).then(() => {
            that.onSelectChange([], []);
            that.getList();
            that.$message.success("删除成功", 3);
          });
        },
        onCancel() {},
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      this.$confirm({
        title: "是否确认导出?",
        content: "此操作将导出当前条件下所有数据而非选中数据",
        onOk() {
          return exportBizCustomerShadowInfo(that.queryParam).then(
            (response) => {
              that.download(response.msg);
              that.$message.success("导出成功", 3);
            }
          );
        },
        onCancel() {},
      });
    },
  },
};
</script>
<style>
.import-button {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.genjin-brder {
  border: 1px solid #ecedee;
  border-radius: 5px;
  margin: 10px 20px;
  padding: 10px;
  color: #606266;
}
.genjin-brder:hover {
  border-left: 3px solid #004ca7;
}

.active {
  border-left: 3px solid #004ca7;
}
.genjin-pinlun {
  color: #000;
  margin-top: 28px;
  font-size: 13px;
}
.genjin-takes {
  color: #000;
  margin-top: 10px;
  font-size: 13px;
}
.aicon {
  margin-right: 5px;
}
.titbox {
  display: block;
  background: #f8643f;
  height: 20px;
  width: 5px;
  margin: 0px 15px;
  flex-direction: column;
}
.text {
  font-size: 16px;
  font-weight: 700;
  flex-direction: column;
  height: 20px;
  line-height: 20px;
}
</style>
